<template>
  <div class="guide-table">
    <!-- 筛选表单区域 -->
    <div class="search-section">
      <t-form :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
        <t-row :gutter="[36, 36]">
          <t-col :span="6">
            <t-form-item label="标题" name="title">
              <t-input
                v-model="formData.title"
                class="form-item-content"
                type="search"
                placeholder="请输入指南标题进行搜索"
                :style="{ minWidth: '200px' }"
                clearable
              >
                <template #suffix-icon>
                  <t-icon name="search" />
                </template>
              </t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="分类" name="categoryId">
              <t-select v-model="formData.categoryId" class="form-item-content" placeholder="请选择指南分类" clearable>
                <t-option
                  v-for="category in categoryOptions"
                  :key="category.id"
                  :value="category.id"
                  :label="category.name"
                />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="状态" name="isCheck">
              <t-select v-model="formData.isCheck" class="form-item-content" placeholder="请选择指南状态" clearable>
                <t-option value="0" label="待审核" />
                <t-option value="1" label="待修改" />
                <t-option value="2" label="已发布" />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="创建时间" name="timeRange">
              <t-date-range-picker
                v-model="formData.timeRange"
                class="form-item-content"
                placeholder="请选择创建时间范围"
                clearable
                :style="{ minWidth: '280px' }"
                mode="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </t-form-item>
          </t-col>
          <!-- 站位 -->
          <t-col :span="6"></t-col>
          <!-- 操作按钮 -->
          <t-col :span="6" class="operation-container">
            <t-space>
              <t-button theme="primary" type="submit" shape="round">
                <template #icon>
                  <t-icon name="search" />
                </template>
                查询
              </t-button>
              <t-button type="reset" variant="base" theme="default" shape="round">
                <template #icon>
                  <t-icon name="refresh" />
                </template>
                重置
              </t-button>
            </t-space>
          </t-col>
        </t-row>
      </t-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-btn-group">
        <t-space>
          <t-button theme="primary" @click="handleAddGuide" shape="round">
            <template #icon>
              <t-icon name="plus" />
            </template>
            新增指南
          </t-button>
          <t-button theme="danger" shape="round" :disabled="selectedRowKeys.length === 0" @click="handleBatchDelete">
            <template #icon>
              <t-icon name="delete" />
            </template>
            批量删除 ({{ selectedRowKeys.length }})
          </t-button>
        </t-space>
      </div>
      <!-- 统计信息 -->
      <div class="stats-info">
        <t-tag theme="primary" variant="light"> 共 {{ pagination.total }} 条记录 </t-tag>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        :vertical-align="verticalAlign"
        :hover="hover"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        :bordered="false"
        :stripe="true"
        row-hover-divider
        @page-change="rehandlePageChange"
        @change="rehandleChange"
        @select-change="onSelectChange"
      >
        <!-- 序号列 -->
        <template #index="{ rowIndex }">
          <div class="index-cell">
            {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
          </div>
        </template>

        <!-- 标题列 -->
        <template #title="{ row }">
          <div class="title-cell">
            <t-tooltip :content="row.title" placement="top">
              <div class="title-content">
                <t-icon name="file-text" class="title-icon" />
                <span class="title-text ellipsis">{{ row.title }}</span>
              </div>
            </t-tooltip>
          </div>
        </template>

        <!-- 类别列 -->
        <template #categoryName="{ row }">
          <div class="category-cell">
            <t-tag theme="primary" variant="light" class="category-tag">
              {{ row.categoryName || '未分类' }}
            </t-tag>
          </div>
        </template>

        <!-- 状态列 -->
        <template #isCheck="{ row }">
          <div class="status-cell">
            <t-tag :theme="getStatusTheme(row.isCheck)" variant="light" class="status-tag">
              {{ getStatusText(row.isCheck) }}
            </t-tag>
          </div>
        </template>

        <!-- 文本内容列，显示"查看详情"按钮 -->
        <template #content="{ row }">
          <div class="content-cell">
            <t-button size="small" theme="primary" variant="outline" shape="round" @click="viewDetail(row)">
              <template #icon>
                <t-icon name="browse" />
              </template>
              查看详情
            </t-button>
          </div>
        </template>

        <!-- 发布者列 -->
        <template #publisher="{ row }">
          <div class="publisher-cell">
            <t-tooltip :content="row.publisher || '未知'" placement="top">
              <div class="publisher-content">
                <span class="publisher-name ellipsis">{{ row.publisher || '未知' }}</span>
              </div>
            </t-tooltip>
          </div>
        </template>

        <!-- 创建时间列 -->
        <template #createTime="{ row }">
          <div class="time-cell">
            <t-icon name="time" class="time-icon" />
            <span class="time-text">{{ formatDateTime(row.createTime) }}</span>
          </div>
        </template>

        <!-- 操作列 -->
        <template #op="slotProps">
          <div class="operation-cell">
            <t-space>
              <t-button size="small" theme="primary" variant="text" @click="handleEdit(slotProps.row)">
                <template #icon>
                  <t-icon name="edit" />
                </template>
                编辑
              </t-button>
              <t-button size="small" theme="warning" variant="text" @click="showStatusChange(slotProps.row)">
                <template #icon>
                  <t-icon name="time" />
                </template>
                状态变更
              </t-button>
              <t-button size="small" theme="danger" variant="text" @click="handleClickDelete(slotProps)">
                <template #icon>
                  <t-icon name="delete" />
                </template>
                删除
              </t-button>
            </t-space>
          </div>
        </template>
      </t-table>

      <!-- 查看内容弹窗 -->
      <t-dialog
        v-model:visible="contentVisible"
        header="内容详情"
        :body="contentBody"
        :footer="false"
        width="700px"
        placement="center"
      />

      <!-- 状态变更弹窗 -->
      <t-dialog
        v-model:visible="statusChangeVisible"
        header="状态记录"
        width="800px"
        placement="center"
        :footer="false"
      >
        <div class="status-change-content">
          <!-- 状态变更记录 - 横向排列 -->
          <div class="status-progress">
            <div
              class="status-step-item"
              :class="{
                active: currentGuide?.isCheck === 1,
                completed: currentGuide?.isCheck === 1 || currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2,
              }"
            >
              <div
                class="step-icon"
                :class="{
                  active: currentGuide?.isCheck === 1,
                  completed: currentGuide?.isCheck === 1 || currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2,
                }"
              >
                <t-icon
                  v-if="currentGuide?.isCheck === 1 || currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2"
                  name="check"
                />
                <span v-else>1</span>
              </div>
              <div class="step-content">
                <div class="step-title">待修改</div>
                <div class="step-desc">指南需要修改后重新提交</div>
              </div>
            </div>

            <div
              class="step-connector"
              :class="{ completed: currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2 }"
            ></div>

            <div
              class="status-step-item"
              :class="{
                active: currentGuide?.isCheck === 0,
                completed: currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2,
              }"
            >
              <div
                class="step-icon"
                :class="{
                  active: currentGuide?.isCheck === 0,
                  completed: currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2,
                }"
              >
                <t-icon v-if="currentGuide?.isCheck === 0 || currentGuide?.isCheck === 2" name="check" />
                <span v-else>2</span>
              </div>
              <div class="step-content">
                <div class="step-title">待审核</div>
                <div class="step-desc">指南已提交，等待审核</div>
              </div>
            </div>

            <div class="step-connector" :class="{ completed: currentGuide?.isCheck === 2 }"></div>

            <div
              class="status-step-item"
              :class="{ active: currentGuide?.isCheck === 2, completed: currentGuide?.isCheck === 2 }"
            >
              <div
                class="step-icon"
                :class="{ active: currentGuide?.isCheck === 2, completed: currentGuide?.isCheck === 2 }"
              >
                <t-icon v-if="currentGuide?.isCheck === 2" name="check" />
                <span v-else>3</span>
              </div>
              <div class="step-content">
                <div class="step-title">已发布</div>
                <div class="step-desc">指南已审核通过并发布</div>
              </div>
            </div>
          </div>

          <!-- 如果是待修改状态，显示拒绝原因 -->
          <div v-if="currentGuide?.isCheck === 1" class="reject-reason">
            <div class="reason-title">拒绝原因：</div>
            <div class="reason-content">
              {{ rejectReasonText }}
            </div>
          </div>

          <!-- 编辑按钮 - 只有待修改状态才显示 -->
          <div v-if="currentGuide?.isCheck === 1" class="edit-action">
            <t-button theme="primary" @click="handleEditGuide" :disabled="!currentGuide">
              <template #icon>
                <t-icon name="edit" />
              </template>
              去编辑
            </t-button>
          </div>
        </div>
      </t-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { deleteGuide, getGuideList } from '@/api/guide';
import { getGuideCategoryList } from '@/api/guideCategory'; // 导入指南类别API
import type { GuideCategoryResponse } from '@/api/model/guideCategoryModel'; // 导入指南类别模型
import type { GuideRequest, GuideResponse } from '@/api/model/guideModel';
import { prefix } from '@/config/global';
import { DEFAULT_PAGINATION } from '@/constants'; // 导入全局分页配置
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import { formatDateTime } from '@/utils/date'; // 导入日期格式化工具
import type { PageInfo, PrimaryTableCol } from 'tdesign-vue-next';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import { computed, onActivated, ref } from 'vue';
import { useRouter } from 'vue-router';
defineOptions({ name: 'GuideIndex' });
// 表单数据接口
interface FormData {
  title?: string;
  categoryId?: number; // 分类ID
  isCheck?: number; // 状态：0-待审核，1-已发布
  timeRange?: [string, string]; // 日期范围，字符串格式
}

// 表格列配置
const COLUMNS: PrimaryTableCol[] = [
  {
    type: 'multiple', // 多选框
    width: 50,
    align: 'center',
    colKey: 'checkbox',
  },
  {
    title: '序号',
    colKey: 'index',
    width: 60,
    align: 'center',
  },
  {
    title: '标题',
    colKey: 'title',
    width: 150, // 增加标题列宽度，因为标题通常较长
    align: 'center',
  },
  {
    title: '类别', // 新增类别列
    colKey: 'categoryName',
    width: 100, // 保持类别列适中宽度
    align: 'center',
  },
  {
    title: '状态', // 新增状态列
    colKey: 'isCheck',
    width: 100, // 状态列宽度
    align: 'center',
  },
  {
    title: '文本内容',
    colKey: 'content',
    width: 120,
    ellipsis: true,
    align: 'center',
  },
  {
    title: '发布者',
    colKey: 'publisher',
    width: 110,
    align: 'center',
  },
  {
    title: '创建时间',
    colKey: 'createTime',
    width: 110,
    align: 'center',
  },
  {
    align: 'left',
    fixed: 'right',
    width: 180,
    colKey: 'op',
    title: '操作',
  },
];

// 初始化表单数据
const searchForm: FormData = {
  title: '',
  categoryId: undefined, // 分类ID
  isCheck: undefined, // 状态：0-待审核，1-已发布
  timeRange: ['', ''], // 日期范围，字符串格式
};

const formData = ref<FormData>({ ...searchForm });
const rowKey = 'id';
const verticalAlign = 'top' as const;
const hover = true;
// 选中行
const selectedRowKeys = ref<number[]>([]);

// 分页配置 - 使用全局配置
const pagination = ref({ ...DEFAULT_PAGINATION });

// 数据相关
const data = ref<GuideResponse[]>([]);
const dataLoading = ref(false);

// 分类相关
const categoryOptions = ref<GuideCategoryResponse[]>([]); // 分类选项

// 弹窗相关
const contentVisible = ref(false);
const currentContent = ref('');

// 状态变更弹窗相关
const statusChangeVisible = ref(false);
const currentGuide = ref<GuideResponse | null>(null);

// Store
const store = useSettingStore();

// 路由
const router = useRouter();

// 表格行选择变化时的回调函数
const onSelectChange = (keys: (string | number)[], options: any) => {
  selectedRowKeys.value = keys as number[];
};

// 获取当前内容
const contentBody = computed(() => {
  return currentContent.value;
});

// 表头固定配置
// 当使用标签页路由时,偏移量为48px,否则为0
// 固定容器为布局组件
const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any,
);

/**
 * 获取指南类别列表
 */
const fetchCategoryOptions = async () => {
  try {
    // 获取所有分类，设置较大的pageSize以获取所有数据
    const res = await getGuideCategoryList({
      pageNum: 1,
      pageSize: 1000, // 设置较大的值以获取所有分类
    });
    const records = res.data.data?.records ?? [];
    categoryOptions.value = records;
  } catch (e) {
    console.error('获取指南类别列表失败:', e);
    MessagePlugin.error('获取指南类别列表失败');
  }
};

// 列表页
onActivated(() => {
  console.log('onActivated');
  // const tabsRouterStore = useTabsRouterStore();
  // console.log('22tabsRouterStore', tabsRouterStore);
  // 页面激活时立即查询分类和列表数据
  fetchCategoryOptions();
  onReset();
});

/**
 * 获取指南列表数据
 */
const fetchData = async () => {
  dataLoading.value = true;
  try {
    console.log('fetchData', formData.value);

    // 构建请求参数
    const params: GuideRequest = {
      title: formData.value.title || undefined,
      categoryId: formData.value.categoryId, // 添加分类ID参数
      isCheck: formData.value.isCheck, // 添加状态参数
      isRead: null as number | null,
      // 使用formatDateTime格式化日期为后端期望的格式
      beginTime: formData.value.timeRange?.[0] ? formatDateTime(formData.value.timeRange[0]) : undefined,
      endTime: formData.value.timeRange?.[1] ? formatDateTime(formData.value.timeRange[1]) : undefined,
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
    };

    console.log('params', params);
    // 发送请求，res.data 类型就是 GuideListResult
    const res = await getGuideList(params);
    console.log('res', res);
    // 通过类型推断安全获取 records 和 total
    const records = res.data.data?.records ?? [];
    const total = res.data.data?.total ?? 0;
    // 字段映射，保证表格能正确显示
    data.value = records.map((item: GuideResponse) => ({
      ...item,
      publishTime: item.updateTime,
    }));
    // 设置总数
    pagination.value.total = total;
  } catch (e) {
    console.error('获取指南列表失败:', e);
    MessagePlugin.error(t('pages.guide.message.loadError'));
  } finally {
    dataLoading.value = false;
  }
};

/**
 * 批量删除指南
 */
const handleBatchDelete = async () => {
  if (selectedRowKeys.value.length === 0) return;
  const dialogInstance = DialogPlugin.confirm({
    header: '提示',
    body: '确定要批量删除选中的指南吗？',
    onConfirm: async () => {
      await deleteGuide(selectedRowKeys.value);
      MessagePlugin.success('批量删除成功！');
      selectedRowKeys.value = [];
      fetchData();
      dialogInstance.destroy(); // 正确关闭弹窗
    },
  });
};

/**
 * 删除指南
 * @param slot 插槽参数
 */
const handleClickDelete = (slot: { row: { id: number } }) => {
  const dialogInstance = DialogPlugin.confirm({
    header: '提示',
    body: '确定要删除该指南吗？',
    onConfirm: async () => {
      try {
        await deleteGuide([slot.row.id]);
        MessagePlugin.success('删除成功！');
        // 中文注释：删除成功后，把该 id 从选中数组中移除，避免批量删除时出错
        selectedRowKeys.value = selectedRowKeys.value.filter((id) => id !== slot.row.id);
        fetchData();
      } catch (error) {
        MessagePlugin.error('删除失败：' + error.message);
      } finally {
        dialogInstance.destroy(); // 正确关闭弹窗
      }
    },
  });
};

/**
 * 表单重置
 */
const onReset = () => {
  formData.value = { ...searchForm };
  fetchData();
};

/**
 * 表单提交
 */
const onSubmit = () => {
  pagination.value.current = 1;
  fetchData();
};

/**
 * 分页变化处理
 */
const rehandlePageChange = (pageInfo: PageInfo) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  fetchData();
};

/**
 * 表格变化处理
 */
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
  console.log('表格变化:', changeParams, triggerAndData);
};

// 新增按钮点击事件
const handleAddGuide = () => {
  // 跳转到新增页面
  router.push({ name: 'GuideAdd' });
};

// 新增 handleEdit 方法，跳转到编辑页面
const handleEdit = (row: GuideRequest) => {
  router.push({ name: 'GuideAdd', query: { id: row.id } });
  statusChangeVisible.value = false;
};

// 查看详情
const viewDetail = (row: GuideRequest) => {
  // 跳转到详情页，带上id参数和来源标记
  router.push({
    name: 'GuideDetail',
    query: {
      id: row.id,
      isRead: row.isRead,
      from: 'guide', // 标记来源页面
    },
  });
};

// 显示状态变更弹窗
const showStatusChange = (row: GuideResponse) => {
  currentGuide.value = row;
  console.log('currentGuide', currentGuide.value);
  statusChangeVisible.value = true;
};

// 获取拒绝原因文本
const rejectReasonText = computed(() => {
  return (currentGuide.value as any)?.rejectReason || '暂无拒绝原因';
});

// 编辑按钮点击事件
const handleEditGuide = () => {
  if (currentGuide.value) {
    handleEdit(currentGuide.value as any);
  }
};

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待审核';
    case 1:
      return '待修改';
    case 2:
      return '已发布';
    default:
      return '未知';
  }
};

// 获取状态主题
const getStatusTheme = (status: number) => {
  switch (status) {
    case 0:
      return 'warning';
    case 1:
      return 'danger';
    case 2:
      return 'success';
    default:
      return 'default';
  }
};
</script>

<style lang="less" scoped>
.guide-table {
  /* 中文注释：主容器背景色、圆角、阴影全部用变量 */
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-large);
  box-shadow: var(--td-shadow-1);
  animation: fadeInUp 0.3s ease-out;

  // 搜索区域样式
  .search-section {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    /* 中文注释：渐变背景用变量，深色模式下会自动适配 */
    background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
    border-bottom: 1px solid var(--td-border-level-1-color);
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      /* 中文注释：顶部渐变条用主题变量 */
      background: linear-gradient(90deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
    }
  }

  // 操作区域样式
  .action-section {
    padding: var(--td-comp-paddingTB-lg) 0;
    display: flex;
    align-items: center;
    background-color: var(--td-bg-color-container);
    border-bottom: 1px solid var(--td-border-level-1-color);
    gap: 16px;
    .action-btn-group {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: 32px !important;
      .t-button {
        min-width: 120px;
        height: 40px;
        font-size: 16px;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        box-sizing: border-box;
        padding: 0 20px;
        .t-icon {
          font-size: 20px;
          margin-right: 6px;
        }
      }
      /* 中文注释：主按钮用主题变量 */
      .t-button--theme-primary {
        background: var(--td-brand-color);
        color: #fff;
        border: none;
        &:hover {
          background: var(--td-brand-color-hover, var(--td-brand-color-1));
        }
      }
      /* 中文注释：危险按钮用变量，深色模式下会适配 */
      .t-button--theme-danger {
        background: var(--td-danger-bg, #f8d7da);
        color: var(--td-danger-color, #d9534f);
        border: none;
        &:hover {
          background: var(--td-danger-bg-hover, #f5c6cb);
          color: var(--td-danger-color-hover, #b52a2a);
        }
        &:disabled,
        &[disabled] {
          background: var(--td-bg-color-disabled, #f3f3f3);
          color: var(--td-text-color-disabled, #bdbdbd);
          border: none;
          cursor: not-allowed;
        }
      }
    }
    .stats-info {
      margin-left: auto;
      display: flex;
      align-items: center;
      .t-tag {
        font-weight: 500;
        padding: 8px 16px;
        border-radius: var(--td-radius-medium);
        /* 中文注释：Tag背景、边框、文字全部用变量 */
        background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
        border: 1px solid var(--td-brand-color-1);
        color: var(--td-brand-color);
      }
    }
  }

  // 表格容器样式
  .table-container {
    padding: 0 var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-xl);
    background-color: var(--td-bg-color-container);
    :deep(.t-table) {
      border-radius: var(--td-radius-medium);
      /* 中文注释：移除overflow hidden，避免影响表头定位 */
      /* overflow: hidden; */
      box-shadow: var(--td-shadow-1);
      border: 1px solid var(--td-border-level-1-color);
      .t-table__header {
        background: linear-gradient(
          135deg,
          var(--td-bg-color-secondarycontainer) 0%,
          var(--td-bg-color-container) 100%
        );
        border-bottom: 2px solid var(--td-border-level-1-color);
        th {
          font-weight: 600;
          color: var(--td-text-color-primary);
          padding: 14px 12px;
          /* 中文注释：移除position relative，避免影响表头定位 */
          /* position: relative; */
          text-align: center;
          vertical-align: middle;
        }
      }
      .t-table__body {
        tr {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          /* 中文注释：移除position relative，避免影响表头定位 */
          /* position: relative; */
          &:hover {
            background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-1) 100%);
            transform: translateY(-2px);
            box-shadow: var(--td-shadow-2);
            z-index: 1;
          }
          td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--td-border-level-1-color);
            text-align: center;
            vertical-align: middle;
            height: 48px;
          }
          &:last-child td {
            border-bottom: none;
          }
        }
      }
    }
  }
}

.t-space.t-space-horizontal {
  gap: 12px !important;
}

// 表单样式优化
.form-item-content {
  width: 100%;
  :deep(.t-input),
  :deep(.t-select),
  :deep(.t-date-range-picker) {
    border-radius: var(--td-radius-medium);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--td-border-level-1-color);
    &:hover {
      border-color: var(--td-brand-color-1);
      box-shadow: 0 0 0 3px var(--td-brand-color-2, rgba(0, 82, 204, 0.08));
    }
    &:focus-within {
      border-color: var(--td-brand-color);
      box-shadow: 0 0 0 4px var(--td-brand-color-2, rgba(0, 82, 204, 0.12));
      transform: translateY(-1px);
    }
    .t-input__suffix {
      color: var(--td-brand-color);
    }
  }
  :deep(.t-date-range-picker) {
    cursor: pointer;
    .t-input__control {
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }
    .t-input__suffix {
      color: var(--td-brand-color);
      font-size: 16px;
      pointer-events: none;
    }
    &:hover::after {
      content: '点击选择日期';
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      z-index: 1000;
      opacity: 0;
      animation: fadeIn 0.2s ease-in-out forwards;
    }
  }
}

// 淡入动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

// 表格单元格样式
.index-cell,
.title-cell,
.category-cell,
.status-cell,
.content-cell,
.publisher-cell,
.time-cell,
.operation-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 36px;
}

.title-cell .title-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  max-width: 100%;
  .title-icon {
    color: var(--td-brand-color);
    font-size: 16px;
    flex-shrink: 0; // 防止图标被压缩
  }
  .title-text {
    font-weight: 500;
    color: var(--td-text-color-primary);
    line-height: 1.4;
    flex: 1; // 让文字部分占据剩余空间
    min-width: 0; // 允许文字部分收缩
  }
}

// 类别单元格样式
.category-cell {
  .category-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--td-radius-medium);
    /* 中文注释：Tag背景、边框、文字全部用变量 */
    background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
    border: 1px solid var(--td-brand-color-1);
    color: var(--td-brand-color);
    font-size: 13px;
    min-width: 60px;
    text-align: center;
  }
}

// 状态单元格样式
.status-cell {
  .status-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--td-radius-medium);
    font-size: 13px;
    min-width: 60px;
    text-align: center;

    /* 中文注释：待审核状态 - 橙色警告 */
    &.t-tag--theme-warning {
      background: linear-gradient(135deg, var(--td-warning-color-1) 0%, var(--td-warning-color-2) 100%);
      border: 1px solid var(--td-warning-color-1);
      color: var(--td-warning-color);
    }

    /* 中文注释：待修改状态 - 红色危险 */
    &.t-tag--theme-danger {
      background: linear-gradient(135deg, var(--td-danger-color-1) 0%, var(--td-danger-color-2) 100%);
      border: 1px solid var(--td-danger-color-1);
      color: var(--td-danger-color);
    }

    /* 中文注释：已发布状态 - 绿色成功 */
    &.t-tag--theme-success {
      background: linear-gradient(135deg, var(--td-success-color-1) 0%, var(--td-success-color-2) 100%);
      border: 1px solid var(--td-success-color-1);
      color: var(--td-success-color);
    }
  }
}

.publisher-cell {
  .publisher-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
  }
  .publisher-name {
    font-weight: 500;
    color: var(--td-text-color-primary);
    text-align: center;
  }
}

.time-cell {
  gap: 6px;
  .time-icon {
    color: var(--td-text-color-placeholder);
    font-size: 14px;
  }
  .time-text {
    color: var(--td-text-color-secondary);
    font-size: 13px;
  }
}

.operation-cell .t-button {
  min-width: 50px;
  height: 28px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0px;
  padding: 0 0px;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.content-text {
  color: var(--td-text-color-secondary);
  line-height: 1.6;
}

.content-cell {
  .t-button {
    min-width: 60px; // 减少按钮最小宽度
    height: 28px; // 减少按钮高度
    font-size: 12px; // 减少字体大小
    padding: 0 8px; // 减少内边距
  }
}

// 分页样式优化
:deep(.t-pagination) {
  margin-top: var(--td-comp-margin-xl);
  padding: var(--td-comp-paddingTB-lg) 0;
  border-top: 1px solid var(--td-border-level-1-color);
  background: linear-gradient(135deg, var(--td-bg-color-secondarycontainer) 0%, var(--td-bg-color-container) 100%);
  border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);
  .t-pagination__total {
    color: var(--td-text-color-secondary);
    font-weight: 600;
  }
  .t-pagination__jumper {
    .t-input {
      border-radius: var(--td-radius-small);
      transition: all 0.2s ease;
      &:hover {
        border-color: var(--td-brand-color-1);
      }
      &:focus-within {
        border-color: var(--td-brand-color);
        box-shadow: 0 0 0 2px var(--td-brand-color-2, rgba(0, 82, 204, 0.1));
      }
    }
  }
  .t-pagination__btn {
    transition: all 0.2s ease;
    border-radius: var(--td-radius-small);
    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--td-shadow-1);
    }
    &.t-is-current {
      background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
      color: white;
      box-shadow: var(--td-shadow-2);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .guide-table {
    .search-section,
    .action-section {
      padding: var(--td-comp-paddingTB-lg) var(--td-comp-paddingLR-lg);
    }
    .table-container {
      padding: 0 var(--td-comp-paddingLR-lg) var(--td-comp-paddingTB-lg);
    }
    .action-section {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
      .stats-info {
        text-align: center;
      }
    }
  }
}

// 状态变更弹窗样式
.status-change-content {
  padding: var(--td-comp-paddingTB-lg);

  .status-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
  }

  .status-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
    z-index: 2;
  }

  .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--td-text-color-placeholder);
    background: var(--td-bg-color-container);
    border: 2px solid var(--td-border-level-2-color);
    transition: all 0.3s ease;

    &.active {
      background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
      border-color: var(--td-brand-color);
      color: white;
      transform: scale(1.1);
      box-shadow: 0 0 0 4px var(--td-brand-color-2, rgba(0, 82, 204, 0.2));
    }

    &.completed {
      background: linear-gradient(135deg, var(--td-success-color) 0%, var(--td-success-color-1) 100%);
      border-color: var(--td-success-color);
      color: white;
    }

    .t-icon {
      font-size: 18px;
    }
  }

  .step-connector {
    flex: 1;
    height: 2px;
    background: var(--td-border-level-2-color);
    margin: 0 16px;
    position: relative;
    z-index: 1;

    &.completed {
      background: linear-gradient(90deg, var(--td-success-color) 0%, var(--td-success-color-1) 100%);
    }
  }

  .step-content {
    text-align: center;
    max-width: 120px;
  }

  .step-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--td-text-color-primary);

    .status-step-item.active & {
      color: var(--td-brand-color);
    }

    .status-step-item.completed & {
      color: var(--td-success-color);
    }
  }

  .step-desc {
    color: var(--td-text-color-secondary);
    font-size: 12px;
    line-height: 1.3;
  }

  .reject-reason {
    margin-top: 24px;
    padding: 16px;
    background: var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
    border-left: 4px solid var(--td-warning-color);

    .reason-title {
      font-weight: 600;
      color: var(--td-warning-color);
      margin-bottom: 8px;
      font-size: 14px;
    }

    .reason-content {
      color: var(--td-text-color-primary);
      line-height: 1.5;
      font-size: 14px;
    }
  }

  .edit-action {
    margin-top: 24px;
    text-align: center;

    .t-button {
      min-width: 120px;
      height: 40px;
      font-size: 16px;
      border-radius: 22px;
    }
  }
}

/* 中文注释：深色模式下的特殊优化 */
:root[theme-mode='dark'] {
  .guide-table {
    /* 中文注释：主容器阴影更深 */
    box-shadow: var(--td-shadow-2);
    .search-section {
      /* 中文注释：深色模式下渐变更暗 */
      background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);
      &::before {
        background: linear-gradient(90deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
      }
    }
    .action-section {
      .t-button--theme-primary {
        /* 中文注释：主按钮深色下更亮 */
        background: var(--td-brand-color-1);
      }
      .t-button--theme-danger {
        /* 中文注释：危险按钮深色下更暗 */
        background: var(--td-danger-bg-dark, #3a2323);
        color: var(--td-danger-color-dark, #ffb3b3);
      }
      .stats-info .t-tag {
        /* 中文注释：Tag深色下更暗 */
        background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);
        border: 1px solid var(--td-brand-color-2);
        color: var(--td-brand-color-1);
      }
    }
    .table-container {
      :deep(.t-table) {
        box-shadow: var(--td-shadow-2);
        .t-table__body tr:hover {
          background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-2) 100%);
          box-shadow: var(--td-shadow-3);
        }
      }
    }
  }
}
</style>
